<template>
    <div>
        <!--使用mint-ui的header组件来创建页面的头部-->
        <mt-header fixed :title="title">
            <a href="javascript:;" :slot="isshow">
                <mt-button icon="back" @click="back">返回</mt-button>
            </a>
        </mt-header>

        <!--页面中间的内容使用<router-view></router-view>标签进行占位-->
        <router-view></router-view>

        <!--使用mui的tabbar来创建底部-->
        <nav class="mui-bar mui-bar-tab">
            <router-link class="mui-tab-item" to="/home">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </router-link>
            <router-link class="mui-tab-item" to="/message">
                <span class="mui-icon mui-icon-email"><span class="mui-badge">0</span></span>
                <span class="mui-tab-label">消息</span>
            </router-link>
            <router-link class="mui-tab-item" to="/search">
                <span class="mui-icon mui-icon-search"></span>
                <span class="mui-tab-label">搜索</span>
            </router-link>
            <router-link class="mui-tab-item" to="/setting">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">设置</span>
            </router-link>
        </nav>
    </div>
</template>

<script>

    export default {
        data(){
            return {
                isshow: '',
                title: '彩票'
            }
        },
        created(){
//            console.log(this.$route.path);
            this.init(this.$route.path);
        },
        methods: {
            back(){
                this.$router.go(-1);
            },
            init(str) {
                //根据url path的不同让header显示不同的内容
                if (str.toLowerCase() === "/home") {
                    this.title = "彩票"
                    this.isshow = ''
                } else if (str.toLowerCase().includes('/ssq')) {
                    this.title = "双色球"
                    this.isshow = 'left'
                } else if (str.toLowerCase().includes('/fc3d')) {
                    this.title = "福彩3D"
                    this.isshow = 'left'
                } else if (str.toLowerCase().includes('/dlt')) {
                    this.title = "超级大乐透"
                    this.isshow = 'left'
                } else if (str.toLowerCase().includes('/qlc')) {
                    this.title = "七乐彩"
                    this.isshow = 'left'
                } else if (str.toLowerCase().includes('/qxc')) {
                    this.title = "七星彩"
                    this.isshow = 'left'
                } else if (str.toLowerCase().includes('/setting')) {
                    this.title = "设置"
                    this.isshow = 'left'
                } else if (str.toLowerCase().includes('/message')) {
                    this.title = "选号信息"
                    this.isshow = 'left'
                } else if (str.toLowerCase().includes('/search')) {
                    this.title = "搜索"
                    this.isshow = 'left'
                } else {
                    this.isshow = 'left'
                }
            }
        },
        watch: {
            "$route": function (newval, oldval) {
                //根据监控url的变化让header显示不同的内容
                this.init(newval.path);
            }
        }
    }
</script>

<style scoped></style>